<template>
	<div class='header-fixed-top'>
		<transition-group v-if='!hotList ? false : true' enter-active-class='animated fadeIn'>
			<router-link 
						tag='div' 
						v-for="item of hotList" 
						:key='item._id' 
						class="hot-list" 
						:class="{ hot_list_active: hotAct == item._id}"
						@touchstart.native='hotTouchstart(item._id)'
						@touchend.native='hotTouchend()'
						:to="'/detail/' + item._id + '/hot'"
			> 
				<p class="list-title">
					{{item.list_title}}
				</p>
				<p class="list-info">
					{{item.list_info}}
				</p>
				<div class="list-bottom">
					<div class="b-l">
						<span class="iconfont user-icon">
							&#xe614;
						</span>
						{{item.list_user}}
					</div>
					<div class="b-r">
						<p class="r-tag">
							{{item.list_tag}}
						</p>
					</div>
				</div>
			</router-link>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name: 'hot-list',
		props: {
			hotList: Array
		},
		data () {
			return {
				hotAct: ''
			}
		},
		methods: {
			hotTouchstart (xb) {
				this.hotAct = xb
			},
			hotTouchend () {
				this.hotAct = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.hot-list
		background:#fff
		padding:24px
		position:relative
		border-bottom:1px #F0F0F0 solid
		.list-title
			color:#494949
			font-size:34px
			line-height:52px
		.list-info
			color:#aaa
			font-size:26px
			margin-top:16px
			line-height:150%
			text-indent:26px
		.list-bottom
			height:40px
			display:flex
			flex-direction:row
			margin-top:18px
			.b-l
				width:50%
				height:40px
				font-size:24px
				color:#aaa
				line-height:42px
				.user-icon
					font-size:24px
			.b-r
				width:50%
				.r-tag
					float:right
					padding:8px 10px
					border:2px $public_thems_color solid
					border-radius:4px
					color:$public_thems_color
	.hot_list_active
		background-color:#F1F1F1
</style>
